<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学术助手 - 功能测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold mb-8 text-center">学术助手 - 功能测试</h1>
        
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">测试分类导航功能</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button onclick="testCategory('databases')" class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600">
                    测试学术数据库
                </button>
                <button onclick="testCategory('tools')" class="bg-green-500 text-white p-4 rounded-lg hover:bg-green-600">
                    测试论文工具
                </button>
                <button onclick="testCategory('community')" class="bg-purple-500 text-white p-4 rounded-lg hover:bg-purple-600">
                    测试学术社区
                </button>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">测试搜索功能</h2>
            <div class="flex gap-4">
                <input type="text" id="searchInput" placeholder="输入搜索关键词..." class="flex-1 p-2 border rounded">
                <button onclick="testSearch()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    搜索
                </button>
            </div>
            <div id="searchResults" class="mt-4"></div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">测试结果</h2>
            <div id="testResults" class="space-y-2"></div>
        </div>
    </div>

    <script>
        // 加载必要的模块
        async function loadModules() {
            const modules = [
                'js/config.js',
                'js/modules/constants.js',
                'js/modules/utils.js',
                'js/modules/api.js',
                'js/modules/ui.js',
                'js/modules/search.js',
                'js/app.js'
            ];
            
            for (const module of modules) {
                const script = document.createElement('script');
                script.src = module;
                document.head.appendChild(script);
                await new Promise(resolve => script.onload = resolve);
            }
        }

        // 测试分类导航
        function testCategory(category) {
            addResult(`测试分类: ${category}`, 'info');
            try {
                if (typeof openCategory === 'function') {
                    openCategory(category);
                    addResult(`✅ 分类 ${category} 功能正常`, 'success');
                } else {
                    addResult(`❌ openCategory 函数未找到`, 'error');
                }
            } catch (error) {
                addResult(`❌ 分类 ${category} 测试失败: ${error.message}`, 'error');
            }
        }

        // 测试搜索功能
        async function testSearch() {
            const query = document.getElementById('searchInput').value;
            if (!query) {
                addResult('❌ 请输入搜索关键词', 'error');
                return;
            }

            addResult(`测试搜索: "${query}"`, 'info');
            try {
                if (window.AcademicAssistant && window.AcademicAssistant.app) {
                    const results = await window.AcademicAssistant.app.searchManager.filterResources(query);
                    addResult(`✅ 搜索完成，找到 ${results.length} 个结果`, 'success');
                    
                    // 显示搜索结果
                    const resultsDiv = document.getElementById('searchResults');
                    resultsDiv.innerHTML = results.map(r => 
                        `<div class="p-2 border-b"><strong>${r.name}</strong><br><small class="text-gray-600">${r.url}</small></div>`
                    ).join('');
                } else {
                    addResult('❌ 搜索管理器未初始化', 'error');
                }
            } catch (error) {
                addResult(`❌ 搜索测试失败: ${error.message}`, 'error');
            }
        }

        // 添加测试结果
        function addResult(message, type) {
            const resultsDiv = document.getElementById('testResults');
            const div = document.createElement('div');
            const colorClass = type === 'success' ? 'text-green-600' : type === 'error' ? 'text-red-600' : 'text-blue-600';
            div.className = `p-2 rounded ${colorClass}`;
            div.textContent = message;
            resultsDiv.appendChild(div);
        }

        // 页面加载完成后初始化
        window.addEventListener('load', async () => {
            addResult('开始加载模块...', 'info');
            try {
                await loadModules();
                addResult('✅ 所有模块加载完成', 'success');
                
                // 等待应用初始化
                setTimeout(() => {
                    if (window.AcademicAssistant && window.AcademicAssistant.app) {
                        addResult('✅ 应用初始化完成', 'success');
                    } else {
                        addResult('❌ 应用初始化失败', 'error');
                    }
                }, 1000);
            } catch (error) {
                addResult(`❌ 模块加载失败: ${error.message}`, 'error');
            }
        });
    </script>
</body>
</html>
